<template>
    <el-container>
        <el-header class="searchBox" height="70px" style="padding: 8px">
            <el-form :inline="true">
                <el-row>
                    <el-form-item label="用户姓名:">
                        <el-input v-model="listQuery.name"></el-input>
                    </el-form-item>
                    <el-button @click="search">搜索</el-button>
                    <el-button @click="reset">重置</el-button>
                    <el-button type="success" plain @click="addUser">新增</el-button>
                </el-row>
            </el-form>
        </el-header>
        <el-main>
            <el-table border :data="userList" v-loading="this.loading">
                <el-table-column label="Id" prop="Id"></el-table-column>
                <el-table-column label="用户名" prop="UserName"></el-table-column>
                <el-table-column label="姓名" prop="RealName"></el-table-column>
                <el-table-column label="年龄"  prop="Age"></el-table-column>
                <el-table-column label="身份证号" prop="IdCardNo"></el-table-column>
                <el-table-column label="操作" width="250" >
                    <template slot-scope="scope">
                        <el-button type="info" @click="editUser(scope.$index,scope.row)">编辑</el-button>
                        <el-button type="primary" @click="allocRole(scope.$index,scope.row)">分配角色</el-button>
                        <el-button type="danger" @click="deleteUser(scope.$index,scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-main>

        <el-dialog :visible.sync="addVisible" title="新增用户" >
            <el-form :model="addList" label-position="left" label-width="80px">
                <el-row :gutter="40">
                    <el-col :span="12">
                        <el-form-item label="用户名:" size="small">
                            <el-input  v-model="addList.UserName"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="真实姓名:" size="small">
                            <el-input  v-model="addList.RealName"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="40">
                    <el-col :span="12">
                        <el-form-item label="密码:" size="small">
                            <el-input  v-model="addList.Password"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="电话:" size="small">
                            <el-input  v-model="addList.Mobile"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="40">
                    <el-col :span="12">
                        <el-form-item label="性别:">
                            <el-select  v-model="addList.Sex" size="small">
                                <el-option label="男" value="1"></el-option>
                                <el-option label="女" value="2"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="角色：">
                            <el-select v-model="addList.roleIdStr" multiple placeholder="请选择" size="small" style="width: 80%">
                                <el-option
                                        v-for="item in roleList"
                                        :key="item.Id"
                                        :label="item.RoleName"
                                        :value="item.Id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="40">
                    <el-col :span="12">
                        <el-form-item label="年龄:">
                            <el-input  v-model="addList.Age" size="small"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="身份证：">
                            <el-input  v-model="addList.IdCardNo" size="small"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item label="备注：">
                    <el-input   type="textarea" autosize :autosize="{ minRows: 4, maxRows: 10}"  v-model="addList.Remark" size="small"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer">
                <el-button @click="handleAdd">保存</el-button>
                <el-button @click="addVisible=false">取消</el-button>
            </span>
        </el-dialog>
        <el-dialog :visible.sync="editVisible" title="编辑用户" >
            <el-form :model="editList" label-position="left" label-width="80px">
                <el-row :gutter="40">
                    <el-col :span="12">
                        <el-form-item label="用户名:" size="small">
                            <el-input  v-model="editList.UserName"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="真实姓名:" size="small">
                            <el-input  v-model="editList.RealName"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="40">
                    <el-col :span="12">
                        <el-form-item label="密码:" size="small">
                            <el-input type="password"  v-model="editList.Password"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="电话:" size="small">
                            <el-input  v-model="editList.Mobile"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="40">
                    <el-col :span="12">
                        <el-form-item label="性别:">
                            <el-select  v-model="editList.Sex" size="small">
                                <el-option label="男" :value="1" :key="1"></el-option>
                                <el-option label="女" :value="2" :key="2"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
<!--                    <el-col :span="12">-->
<!--                        <el-form-item label="角色:">-->
<!--                            <el-select v-model="editList.roleIdStr" multiple placeholder="请选择" size="small" style="width: 80%">-->
<!--                                <el-option-->
<!--                                        v-for="item in roleList"-->
<!--                                        :key="item.Id"-->
<!--                                        :label="item.RoleName"-->
<!--                                        :value="item.Id">-->
<!--                                </el-option>-->
<!--                            </el-select>-->
<!--                        </el-form-item>-->
<!--                    </el-col>-->
                </el-row>
                <el-row :gutter="40">
                    <el-col :span="12">
                        <el-form-item label="年龄:">
                            <el-input  v-model="editList.Age" size="small"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="身份证：">
                            <el-input  v-model="editList.IdCardNo" size="small"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item label="备注：">
                    <el-input type="textarea" autosize :autosize="{ minRows: 4, maxRows: 10}"   v-model="editList.Remark" size="small"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer">
                <el-button @click="handleEdit">保存</el-button>
                <el-button @click="editVisible=false">取消</el-button>
            </span>
        </el-dialog>
        <el-dialog :visible.sync="allocRoleVisible" title="选择角色" width="400px" center>
            <el-form :model="editList" label-position="left" label-width="80px">
                <el-form-item label="选择角色">
                    <el-select v-model="editList.RoleName" multiple placeholder="请选择" size="small" style="width: 80%">
                        <el-option
                                v-for="item in roleList"
                                :key="item.Id"
                                :label="item.RoleName"
                                :value="item.Id">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
        <el-button @click="allocDialogVisible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="handleAlloc()" size="small">确 定</el-button>
      </span>
        </el-dialog>
    </el-container>
</template>

<script>
import {
    addUser,
    deleteUser,
    fetchAllUsers,
    getUserByName,
    updateUserInfo,
    updateUserRoles
} from "../../../api/userSetting";
import {fetchAllRoles} from "../../../api/roleSetting";

const defaultListQuery={
    name:''
}

const defaultList={
    UserName:'',
    Password:'',
    RealName:'',
    Mobile:'',
    Sex:'',
    Age:'',
    IdCardNo:'',
    RoleName:[],
    Remark:'',
    Id:''
}

export default {
    name: "UserSetting",
    data() {
        return {
            userList: [],
            loading:false,
            addVisible:false,
            editVisible:false,
            allocRoleVisible:false,
            listQuery:Object.assign({},defaultListQuery),
            addList:Object.assign({},defaultList),
            editList:Object.assign({},defaultList),
            roleList:[],
        }
    },
    methods:{
            getUserList(){
                this.loading=true
                fetchAllUsers().then(res=>{
                    this.loading=false
                    this.userList=res.Result

                })
            },
            deleteUser(index,row){
                let para={id:row.Id}
                this.$confirm('是否要删除该用户?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    deleteUser(para).then(res => {
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                        },
                        this.getUserList()
                    )})

            },

            search(){
                if(this.listQuery.name=='')
                {
                    this.$message({
                        type:'warning',
                        message:'请输入值！'
                    })
                }
                else{
                    this.loading=true
                    getUserByName(this.listQuery).then(res=>{
                            this.userList=res.Result
                        this.loading=false
                    }).catch(err=>{
                        this.loading=false
                    })
                }
            },

            addUser(){
                this.addVisible=true
            },
            reset(){
                this.listQuery.name=''
                this.getUserList()
            },
            getRoleDictionary(){
                fetchAllRoles().then(res=>{
                    this.roleList = res.Result
                })
            },
            handleAdd(){
                this.addList.roleIdStr=this.addList.roleIdStr.toString()
                addUser(this.addList).then(res=>{
                    this.$message({
                        type: 'success',
                        message: '添加成功！'
                    });
                    this.getUserList()
                })
            },

            //点击编辑
            editUser(index,row){
                this.editVisible=true
                this.editList=Object.assign({},row)
                // console.log(this.editList)
            },
            handleEdit(){
                updateUserInfo(this.editList).then(res=>{
                    this.getUserList()
                    this.editVisible=false
                })
            },

            allocRole(index,row){
                this.allocRoleVisible=true
                let strArr=row.RoleName.split(',')
                row.RoleName=[]
                strArr.forEach(item=>{
                    row.RoleName.push(+item)
                })
                // console.log(row.RoleName)
                this.editList=Object.assign({},row)
                // console.log(this.editList)
            },


            handleAlloc(){
                this.editList.RoleName=this.editList.RoleName.toString()
                let para={
                    userId:this.editList.Id,
                    mIdStr: this.editList.RoleName
                }
                updateUserRoles(para).then(res=>{
                    this.allocRoleVisible=false
                    this.getUserList()
                })
            }
    },
    created() {
        this.getUserList()
        this.getRoleDictionary()
    }

}
</script>

<style scoped>
    .searchBox{
        border: 1px solid rgb(191, 203, 217);
    }
</style>